<template>
	<view class="page">
		<nav-bar>市场</nav-bar>
		<view class="list-content">
			<view class="list">
				<view v-for="(item,index) in affiliatedList" :key="index">
					<view class="item" @click="toggleExpand(index)">
						<view class="left">
							<view class="title">{{item.realName}}</view>
							<view class="date">vip：{{item.vip}}</view>
						</view>
						<view class="right">
							<view class="num1">推荐人：{{item.referenceUser}}</view>
							<view class="arrow" v-if="Object.keys(item.children).length !== 0"><uni-icons :type="item.expanded ? 'bottom' : 'right'" size="18"></uni-icons></view>
						</view>
					</view>
					
					<view class="children-container" :class="{expanded: item.expanded}">
						<view v-for="(citem,cindex) in item.children" :key="cindex">
							<view class="item citem" @click="toggleExpand(index, cindex)">
								<view class="left">
									<view class="title">{{citem.realName}}</view>
									<view class="date">vip：{{citem.vip}}</view>
								</view>
								<view class="right">
									<view class="num1">推荐人：{{citem.referenceUser}}</view>
									<view class="arrow" v-if="Object.keys(citem.children).length !== 0"><uni-icons :type="citem.expanded ? 'bottom' : 'right'" size="18"></uni-icons></view>
								</view>
							</view>
							
							<view class="grandchildren-container" :class="{expanded: citem.expanded}">
								<view class="item ditem" v-for="(ditem,dindex) in citem.children" :key="dindex">
									<view class="left">
										<view class="title">{{ditem.realName}}</view>
										<view class="date">vip：{{ditem.vip}}</view>
									</view>
									<view class="right">
										<view class="num1">推荐人：{{ditem.referenceUser}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			affiliatedList: [],
		}
	},
	methods: {
		getAffiliated() {
			this.$http({
				url: `/user/Affiliated/${this.userInfo.id}`,
				method: "GET",
			}).then((res) => {
				this.affiliatedList = res.map(item => ({
				  ...item,
				  expanded: false,
				  children: item.children?.map(citem => ({
					...citem,
					expanded: false
				  }))
				}))
			})
		},
		toggleExpand(index, cindex = null) {
		      if (cindex === null) {
		        // 一级菜单点击
		        this.$set(this.affiliatedList[index], 'expanded', !this.affiliatedList[index].expanded);
		      } else {
		        // 二级菜单点击
		        this.$set(this.affiliatedList[index].children[cindex], 'expanded', 
		                 !this.affiliatedList[index].children[cindex].expanded);
		      }
		}
	},
	onShow(){
		this.getAffiliated()
	},
	computed: {
		userInfo() {
			return this.userStore.userInfo;
		}
	},
}
</script>

<style scoped lang="scss">
	.list-content{
		.item{
			display: flex;
			align-items: center;
			padding: 20rpx;
			color: #333;
			border-bottom: 1px solid #eee;
			background-color: #fff;
			&.citem{
				padding-left: 2em;
				background-color: #eee;
			}
			&.ditem{
				padding-left: 4em;
				background-color: #999;
			}
		}
		.left{
			flex: 1;
			overflow: hidden;
			font-size: 22rpx;
		}
		.right{
			display: flex;
			flex-shrink: 0;
		}
		.title{
			margin-bottom: 15rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
		}
		.date{
			color: #999;
		}
		.right{
			position: relative;
			text-align: right;
		}
		.num1{
			margin-bottom: 15rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.num2{
			font-size: 24rpx;
			color: #999;
		}
	}
	/* 添加动画效果 */
	  .children-container, .grandchildren-container {
	    max-height: 0;
	    overflow: hidden;
	    transition: max-height 0.3s ease-out;
	    
	    &.expanded {
	      max-height: 2000px; /* 设置一个足够大的值 */
	      transition: max-height 0.5s ease-in;
	    }
	  }
	  
	  .arrow {
		margin-right: 10rpx;
	    font-size: 24rpx;
	  }
</style>
